<template>
  <div>
    <el-button
      class="add"
      type="primary"
      :disabled="isBtnDisable"
      @click="addClass"
      >{{ addname }}</el-button
    >
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      row-key="attr_id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div class="cls">
            <el-tag
              type="warning"
              closable
              v-for="item in scope.row.attr_vals.split(',')"
              :key="item"
              >{{ item }}</el-tag
            >
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="attr_name" label="名称"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row)"
            >修改</el-button
          >
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="addname"
      :visible.sync="dialogFormVisible"
      @close="closeDialog"
    >
      <el-form :model="addForm" :rules="rules" ref="ruleForm">
        <el-form-item :label="addname + '名称：'" prop="attr_name">
          <el-input v-model="addForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addc">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="修改名称"
      :visible.sync="editdialogFormVisible"
      @close="closeDialog"
    >
      <el-form :model="editForm" :rules="rules" ref="ruleForm">
        <el-form-item :label="addname + '名称：'" prop="attr_name">
          <el-input v-model="editForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="edi">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["tableData", "addname", "selectIDs", "activetabs"],
  data() {
    return {
      dialogFormVisible: false,
      editdialogFormVisible: false,
      addForm: {
        attr_name: "",
        attr_sel: "",
      },
      editForm:{},
      rules: {
        attr_name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async getcl() {
      const { data: re } = await this.$http.get(
        `categories/${this.isSelectID}/attributes`,
        { params: { sel: this.activetabs } }
      );
      if (re.meta.status !== 200) {
        return (this.$message.erro = "获取商品分类失败");
      }
      this.tableData = re.data;
    },
    addClass() {
      this.dialogFormVisible = true;
    },
    closeDialog() {
      this.$refs.ruleForm.resetFields();
    },
    async addc() {
      this.addForm.attr_sel = this.activetabs;
      this.$refs.ruleForm.validate(async (v) => {
        if (!v) return;
        console.log(this.addForm);
        const { data: res } = await this.$http.post(
          `categories/${this.isSelectID}/attributes`,
          this.addForm
        );
        if (res.meta.status !== 201) {
          return this.$message.error("添加失败");
        }
        this.$message.success("添加成功");
        this.dialogFormVisible = false;
        this.getcl();
      });
    },
    edit(scop){
        this.editForm = scop;
        console.log(this.editForm)
        this.editdialogFormVisible = true;
    },
    async edi(){
        const { data: re } = await this.$http.put(
            `categories/${this.editForm.cat_id}/attributes/${this.editForm.attr_id}`,this.editForm
          );
          if (re.meta.status !== 200) {
            return this.$message.error("修改失败");
          }
          this.$message.success("修改成功");
          this.getcl();
          this.editdialogFormVisible = false;
    },
    del(res) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data: re } = await this.$http.delete(
            `categories/${res.cat_id}/attributes/${res.attr_id}`
          );
          if (re.meta.status !== 200) {
            return (this.$message.erro = "删除分类失败");
          }
          this.getcl();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  computed: {
    isBtnDisable() {
      if (this.selectIDs.length != 3) {
        return true;
      }
      return false;
    },
    isSelectID() {
      if (this.selectIDs.length != 3) {
        return null;
      }
      return this.selectIDs[2];
    },
  },
};
</script>
<style scoped>
.add {
  margin: 10px 0;
}
.cls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.el-tag {
  margin: 10px 20px;
}
</style>